<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
    window.onload = function() {
        let router = new VueRouter({
            routes: [
                {
                    path: '/user',
                    component: {
                        template: '<div><h4>用户</h4><router-view></router-view></div>' ,
                    },
                    children: [
                        {
                            path: 'info:id',
                            name: 'i',
                            component: {
                                template: '<span>用户信息</span>',
                            },
                        },
                        {
                            path: 'awatar',
                            name: 'a',
                            component: {
                                template: '<span>头像</span>',
                            },
                        }
                    ]
                },
            ]
        })

        new Vue({
            el: '#box',
            router: router
        })
    }

    </script>
</head>
<body>
    <div id="box">
        <!-- 这里传的就不是一个路径了，而是一个json的参数 所以要用:to-->
        <router-link :to="{name: 'i', params: {}, query: {}}">用户信息</router-link>
        <router-link :to="{name: 'a'}">用户头像</router-link>
        <router-view></router-view>
    </div>
</body>
</html>
